<template>
	<view class="messageBox">
	
		<view class="cardItem" v-for="(i,n) in list" :key="n">
			<view class="titleText">
				<text class="t1">{{i.title}}</text>
				<text>{{i.addtime}}</text>
			</view>
			<view class="cardInfo">
				{{i.content}}
			</view>
		</view>
		<uv-empty v-if="list.length==0" mode="message" icon="https://cdn.uviewui.com/uview/empty/message.png"></uv-empty>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
				
			async getList(){
			const {data} = 	await this.$api.userNotice()
			console.log(data)
			this.list = data.list
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.messageBox {
		min-height: 100vh;
		background-color: RGBA(245, 245, 245, 1);
		padding: 24rpx 0rpx;

		.cardItem {
			width: 710rpx;
			height: 200rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9, 2, 4, 0.03);
			border-radius: 12rpx;
			margin: 0 auto;
			padding: 33rpx 28rpx 0rpx;
			font-size: 24rpx;
			color: rgba(85, 85, 85, 1);
            margin-bottom: 20rpx;
			.titleText {
				display: flex;
				justify-content: space-between;

				.t1 {
					font-size: 26rpx;
					color: #222222;
				}
			}

			.cardInfo {
				width: 645rpx;
				height: 70rpx;
				line-height: 40rpx;
				margin-top: 32rpx;
				overflow: hidden;
				/*文本溢出隐藏*/
				text-overflow: ellipsis;
				/*显示成省略号*/
				display: -webkit-box;
				/*对象作为伸缩盒子模型展示，我不太懂这条*/
				-webkit-line-clamp: 3;
				/*第三行开始省略*/
				-webkit-box-orient: vertical;
				/*设置或检索伸缩盒对象的子元素的排列方式 */
			}
		}
	}
</style>